<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="keywords" content="学习博客,开源博客,www.baidu.com">
  <meta name="description" content="一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流">
  <link rel="icon" href="">
  <title>学习博客-一个专注于东搞下西搞下的博客平台</title>
  <style lang="scss">
    * {
      padding: 0;
      margin: 0;
      /* font-family: "Lucida Calligraphy", cursive, serif, sans-serif; */
      font-family: "shajiati";

    }

    @font-face {
      font-family: 'shajiati';
      src: url('/assets/Aa落月楷书.ttf');
    }


    .el-dropdown-menu {
      background-color: var(--background-color) !important;
      color: var(--text-color) !important;
      border: 0 !important;

      .el-dropdown-menu__item:hover {
        background-color: var(--menu-background-color) !important;
      }

    }

    /* 修改滚动条宽度 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    /* 修改滚动条颜色 */
    ::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
    }

    /* 修改滚动条轨道颜色 */
    ::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 5px;
    }

    ::selection {
      color: #fff;
      background-color: var(--theme-color);
    }

    .el-card__body {
      padding: 0 !important;
    }

    .el-card {
      border: 0 !important;
    }

    .el-dialog {
      background-color: var(--background-color) !important;
      color: var(--article-color) !important;
      border-radius: 10px;

      .el-dialog__title {
        color: var(--article-color) !important;

      }


    }

    .el-input__inner {
      background-color: var(--background-color) !important;
      border-color: var(--hot-border-color) !important;

      &:focus {
        border-color: var(--theme-color) !important;
      }
    }

    @media screen and (max-width: 1118px) {
      .dialog {
        width: 100%;

        /deep/ .el-dialog {
          width: 100% !important;
        }
      }
    }
  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
<script>
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      //离开此标签页
      document.title = "多看看吗o(>﹏<)o"
    } else {
      //进入此标签页
      document.title = "好嘛O(∩_∩)O哈哈~"

      window.setTimeout(() => {
        document.title = "学习博客-一个东搞下西搞下的博客平台"
      }, 800)
      //进入此标签页
    }
  });
</script>

<!-- <span class="js-cursor-container"></span>
<script>
  var vm;
  (function fairyDustCursor() {

    var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
    var width = window.innerWidth;
    var height = window.innerHeight;
    var cursor = { x: width / 2, y: width / 2 };
    var particles = [];

    function init() {
      bindEvents();
      loop();
    }

    // Bind events that are needed
    function bindEvents() {
      document.addEventListener('mousemove', onMouseMove);
      window.addEventListener('resize', onWindowResize);
    }

    function onWindowResize(e) {
      width = window.innerWidth;
      height = window.innerHeight;
    }

    function onMouseMove(e) {
      cursor.x = e.clientX;
      cursor.y = e.clientY;

      addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
    }

    function addParticle(x, y, color) {
      var particle = new Particle();
      particle.init(x, y, color);
      particles.push(particle);
    }

    function updateParticles() {

      // Updated
      for (var i = 0; i < particles.length; i++) {
        particles[i].update();
      }

      // Remove dead particles
      for (var i = particles.length - 1; i >= 0; i--) {
        if (particles[i].lifeSpan < 0) {
          particles[i].die();
          particles.splice(i, 1);
        }
      }

    }

    function loop() {
      requestAnimationFrame(loop);
      updateParticles();
    }

    /**
     * Particles
     */
    function Particle() {

      this.character = "*";
      this.lifeSpan = 120; //ms
      this.initialStyles = {
        "position": "fixed",
        "display": "inline-block",
        "top": "0px",
        "left": "0px",
        "pointerEvents": "none",
        "touch-action": "none",
        "z-index": "10000000",
        "fontSize": "25px",
        "will-change": "transform"
      };

      // Init, and set properties
      this.init = function (x, y, color) {

        this.velocity = {
          x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
          y: 1
        };

        this.position = { x: x + 10, y: y + 10 };
        this.initialStyles.color = color;

        this.element = document.createElement('span');
        this.element.innerHTML = this.character;
        applyProperties(this.element, this.initialStyles);
        this.update();

        document.querySelector('.js-cursor-container').appendChild(this.element);
      };

      this.update = function () {
        this.position.x += this.velocity.x;
        this.position.y += this.velocity.y;
        this.lifeSpan--;

        this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
      }

      this.die = function () {
        this.element.parentNode.removeChild(this.element);
      }

    }

    /**
     * Utils
     */
    // Applies css `properties` to an element.
    function applyProperties(target, properties) {
      for (var key in properties) {
        target.style[key] = properties[key];
      }
    }

    if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
  })();
</script> -->


</html>